/* eslint-disable import/no-duplicates */
<!--
 * @Author: songliuyang@58.com
 * @Date: 2021-12-16 13:55:56
 * @LastEditors: songliuyang@58.com
 * @LastEditTime: 2021-12-16 14:57:14
-->
<template lang="pug">
.contain(:class="[show ? '' : 'none']")
  .contain1(ref="canvas")
    slot
  canvas#canvas.dis-none
</template>
<script>
// 在组件中使用 实例见pages > demoForTest > ToCanvasImg
// import HtmlToCanvas from '@/components/HtmlToCanvas'
// <HtmlToCanvas @getCanvas="getCanvas"/>
//  getCanvas(canvas){console.log(canvas)}

// 圆角矩形
import html2canvas from 'html2canvas'
CanvasRenderingContext2D.prototype.roundRect = function (x, y, w, h, r = 10) {
  var minSize = Math.min(w, h)
  if (r > minSize / 2) r = minSize / 2
  // 开始绘制
  this.beginPath()
  this.moveTo(x + r, y)
  this.arcTo(x + w, y, x + w, y + h, r)
  this.arcTo(x + w, y + h, x, y + h, r)
  this.arcTo(x, y + h, x, y, r)
  this.arcTo(x, y, x + w, y, r)
  this.closePath()
  return this
}
export default {
  name: 'HtmlToCanvas',
  props: ['show'],
  // props: {
  //   show: {
  //     type: Boolean,
  //     default: function () {
  //       return true
  //     }
  //   }
  // },
  data () {
    return {
      // show: false,
      h: 0
    }
  },
  computed: {},
  mounted () {
    // this.h =
    //   window.innerHeight ||
    //   document.documentElement.clientHeight ||
    //   document.body.clientHeight;
  },
  methods: {
    toMakeCanvas (isZhi = false) {
      const canvasDom = this.$refs.canvas.firstChild
      const radius = parseInt(canvasDom.style.borderRadius) || 25
      console.log(radius)

      // 设置放大倍数
      const scale = window.devicePixelRatio

      // 传入节点原始宽高
      const _width = canvasDom.offsetWidth
      const _height = canvasDom.offsetHeight

      // html2canvas配置项
      const ops = {
        width: _width,
        height: _height,
        useCORS: true,
        // allowTaint: false,
        allowTaint: true,
        backgroundColor: null,
        scale: scale
        // x: 0,
      }
      console.log(ops, 'optionsIos');
      (window.html2canvas || html2canvas)(canvasDom, ops).then((canvas) => {
        this.$emit('getCanvas', canvas.toDataURL('image/png'))
        return null
        // const newCanvas = document.querySelector('#canvas')
        // const context = newCanvas.getContext('2d')
        // const image = new Image()
        // newCanvas.width = canvas.width
        // newCanvas.height = canvas.height
        // image.style.width = canvas.width
        // image.style.height = canvas.height
        // image.src = canvas.toDataURL('image/png')
        // image.onload = () => {
        //   const pattern = context.createPattern(image, 'no-repeat')
        //   context.roundRect(0, 0, canvas.width, canvas.height, 30)
        //   // 填充绘制的圆
        //   context.fillStyle = pattern
        //   context.fill()
        //   // this.$parent.getCanvas(newCanvas.toDataURL("image/png"));
        //   this.$emit('getCanvas', newCanvas.toDataURL('image/png'))
        // }
        // document.body.appendChild(image);
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.contain {
  -webkit-overflow-scrolling: touch;
  box-sizing: border-box;
  // width: auto;
  // height: auto;
  // width: 6.16rem;
  // height: 8.88rem;
  // border-radius: .16rem;
  // display: flex;
  // flex-direction: column;
  // flex-wrap: wrap;
  // align-items: center;
  position: absolute;
  // zoom: 1;
}
.none {
  position: fixed;
  top: 110%;
}
.frame {
  width: 100%;
  height: 100%;
  border: none;
}
.dis-none {
  display: none;
}
</style>
